<template>
  <el-dialog
    title="修改活动时间"
    :visible.sync="isVisible"
    @close="closeDialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="false"
    width="35%"
    center
  >
    <el-form :model="formdata" label-width="90px">
      <el-form-item label="活动时间：" required v-if="flag != 0 && type == 1">
        <div style="display: inline-block">
          <el-form-item prop="startTime">
            <el-date-picker
              v-model="formdata.startTime"
              type="date"
              placeholder="开始日期"
              value-format="yyyy-MM-dd"
              :picker-options="startTimeOptions"
            ></el-date-picker>
          </el-form-item>
        </div>
        <div style="display: inline-block; margin: 0 5px">-</div>
        <div style="display: inline-block">
          <el-form-item prop="endTime">
            <el-date-picker
              v-model="formdata.endTime"
              type="date"
              placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="endTimeOptions"
            ></el-date-picker>
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item label="活动时间：" required v-else>
        <div style="display: inline-block">
          <el-form-item prop="startTime">
            <el-date-picker
              v-model="formdata.startTime"
              type="date"
              placeholder="开始日期"
              value-format="yyyy-MM-dd"
              :picker-options="startOptions"
            ></el-date-picker>
          </el-form-item>
        </div>
        <div style="display: inline-block; margin: 0 5px">-</div>
        <div style="display: inline-block">
          <el-form-item prop="endTime">
            <el-date-picker
              v-model="formdata.endTime"
              type="date"
              placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="endOptions"
            ></el-date-picker>
          </el-form-item>
        </div>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="isVisible = false">取 消</el-button>
      <el-button type="primary" @click="changetime">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { modifyTime } from "@/api/activityManage";
export default {
  inject: ["reload"],
  data() {
    return {
      formdata: {
        startTime: "",
        endTime: "",
        activityId: "",
      },
      flag: this.dialogRow.gameIssueTime,
      type: this.dialogRow.type,
      isVisible: this.isShow,
      startTimeOptions: {
        disabledDate: (time) => {
          let delay = this.dialogRow.gameIssueTime;
          let secondNum = 60 * 60 * 24 * 6 * 1000;
          if (delay != 0) {
            return (
              new Date(delay).getTime() + secondNum < time.getTime() ||
              new Date(delay).getTime() - 8.64e7 > time.getTime() ||
              time.getTime() < Date.now() - 8.64e7
            );
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      },
      endTimeOptions: {
        disabledDate: (time) => {
          let delay = this.formdata.startTime;
          let end = this.dialogRow.gameIssueTime;
          let secondNum = 60 * 60 * 24 * 6 * 1000;
          if (delay) {
            return (
              time.getTime() < new Date(delay).getTime() - 8.64e7 ||
              new Date(end).getTime() + secondNum < time.getTime()
            );
          } else {
            return true;
          }
        },
      },
      startOptions: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      endOptions: {
        disabledDate: (time) => {
          let delay = this.formdata.startTime;
          if (delay) {
            return time.getTime() < new Date(delay).getTime() - 8.64e7;
          } else {
            return true;
          }
        },
      },
      rules: {
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ],
      },
    };
  },
  props: {
    isShow: Boolean,
    dialogRow: Object,
  },
  mounted() {
    this.formdata = Object.assign({}, this.dialogRow);
  },
  methods: {
    closeDialog() {
      this.$emit("closeDialog");
    },
    changetime() {
      const ele = {
        activityId: this.formdata.activityId,
        startTime: this.formdata.startTime,
        endTime: this.formdata.endTime,
      };
      const para = Object.assign({}, ele);
      if (new Date(this.formdata.startTime) > new Date(this.formdata.endTime)) {
        this.$message.error("您设置的活动时间有误，请检查");
      } else {
        modifyTime(para)
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              setTimeout(() => {
                this.reload();
              }, 20);
              this.isVisible = false;
            }
          })
          .catch((error) => {});
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog__wrapper .el-input {
  margin: 0 5px !important;
}
.el-input {
  width: 158px;
}
</style>